<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/20
  Time: 15:57
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="baidu-tc-cerfication" content="8f75aa1d017086290b42263df41c1791"/>
    <meta name="keywords" content="自助游,舒客,旅居网"/>
    <meta name="description" content="舒客旅游网 Yododo"/>
    <meta name="apple-mobile-web-app-title" content="0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" href="${path}/admin/layuiadmin/layui/css/layui.css" media="all">
    <title>个人中心-个人信息</title>
    <link rel="stylesheet" href="${path}/LeisureSeeker/css/jquery-ui-1.9.custom.css">
    <link rel="stylesheet" href="${path}/LeisureSeeker/css/ylj.css">
    <script type="text/javascript" charset="utf-8"
            src="${path}/LeisureSeeker/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="${path}/LeisureSeeker/js/jquery-ui-1.9.2.min.js"></script>
    <script type="text/javascript"> var $j = jQuery.noConflict(); </script>
    <script type="text/javascript" charset="utf-8"
            src="${path}/LeisureSeeker/js/yododo.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="${path}/LeisureSeeker/js/prototype.js"></script>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="icon" href="${path}/LeisureSeeker/icons/favicon.ico" sizes="16x16"/>

</head>
<body>
<jsp:include page="header.jsp"/>
<div class="usersp-main">
    <div class="usersp-hd">
        <div class="w1200">
            <div class="usersp-z clearfix">
                <strong>${sessionScope.userInfo.userName!=null?sessionScope.userInfo.userName:sessionScope.userInfo.tel}<i>的个人空间</i>
                    <span>推荐</span></strong>
            </div>
            <div class="usersp-t clearfix">
                <a href="${path}/usercenterapi/userCenter">TA的攻略</a>
                <a class="current" href="${path}/usercenterapi/userInfo">个人信息</a>
                <a href="${path}/usercenterapi/userStrategy">发布攻略</a>
                <a href="${path}/usercenterapi/userCollection">TA的收藏</a>
            </div>
        </div>
    </div>
    <script>
        function ajaxDeleteFriendByMid(friendid) {
            $j.ajax({
                url: 'http://www.yododo.com/user/ajaxDeleteFriendByMid.ydd',
                type: 'GET',
                data: 'friendid=' + friendid,
                timeout: 10000,
                success: function (msg) {
                    location.href = 'http://www.yododo.com/user/' + friendid;
                }
            });
        }

        function ajaxAddFriendByName(name) {
            $j.ajax({
                url: 'http://www.yododo.com/user/ajaxAddFriend.ydd',
                type: 'GET',
                data: 'name=' + name,
                timeout: 10000,
                success: function (msg) {
                    location.href = 'http://www.yododo.com/user/0126592891AC0830FF8080812657A536';
                }
            });
        }
    </script>

    <div class="w1200">
        <div class="usersp-lb">
            完善个人信息
        </div>
    </div>
    <div class="layui-container">
        <div class="layui-tab" lay-filter="test">
            <ul class="layui-tab-title" style="left: 12px;">
                <li class="layui-this" lay-id="11">个人信息</li>
                <li lay-id="22">修改信息</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" style="margin-top: 30px">
                        <div class="layui-form-item">
                            <div>
                                用户名：${sessionScope.userInfo.userName!=null?sessionScope.userInfo.userName:"请完善名字"}</div>
                        </div>
                        <div class="layui-form-item">
                            <div>邮箱：${sessionScope.userInfo.email!=null?sessionScope.userInfo.email:"请完善邮箱"}</div>
                        </div>
                        <div class="layui-form-item">
                            <div>性别：${sessionScope.userInfo.sex!=null?sessionScope.userInfo.sex:"请完善性别"}</div>
                        </div>
                        <div class="layui-form-item">
                            <div>
                                出生年月：${sessionScope.userInfo.birthday!=null?sessionScope.userInfo.birthday:"请完善生日"}</div>
                        </div>
                        <div class="layui-form-item">
                            <div>电话：${sessionScope.userInfo.tel!=null?sessionScope.userInfo.tel:"请完善电话"}</div>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item">
                    <%--修改信息的表单--%>
                    <form class="layui-form" id="addEmployeeForm">
                        <div class="layui-form-item" style="display: none">
                            <label class="layui-form-label">ID：</label>
                            <div class="layui-input-block">
                                <input type="text" name="userId" class="layui-input"
                                       value="${sessionScope.userInfo.userId}" readonly="readonly">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名：</label>
                            <div class="layui-input-block">
                                <input type="text" name="userName" id="userName1" class="layui-input"
                                       lay-verify="required|name"
                                >
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码：</label>
                            <div class="layui-input-block">
                                <input type="password" name="userPwd" id="userPwd1" class="layui-input"
                                       placeholder="${sessionScope.userInfo.userPwd!=null?"请输入需要更改的密码,若不更改，输入原密码":"请输入新密码"}"
                                       lay-verify="required|pass"
                                >
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别：</label>
                            <div class="layui-input-block">
                                <input type="radio" id="male" name="sex" value="男" title="男" checked>
                                <input type="radio" id="female" name="sex" value="女" title="女">

                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">email：</label>
                            <div class="layui-input-block">
                                <input type="text" name="email" id="email" class="layui-input"
                                       lay-verify="required|email"
                                >
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">出生年月</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" id="birthday" name="birthday">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="demo1">修改</button>
                            </div>
                        </div>
                    </form>


                </div>
            </div>
        </div>
    </div>
</div>

<jsp:include page="bottom.jsp"/>
<script src="${path}/admin/layuiadmin/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'layedit', 'laydate', 'element'], function () {
        var $ = layui.jquery
            , element = layui.element;
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        laydate.render({
            elem: '#test1'
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });
        $('#info').on('click', function () {
            layer.open({
                title: '完善个人信息',
                shadeClose: true,
                shade: false,
                content: $("#completeInfo")
            });
        });
        $(document).ready(function () {
            if ($("#userName1").val != null) {
                $("#userName1").val("${sessionScope.userInfo.userName}");
            } else {
                $("#userName1").attr("placeholder", "在这里输入账号")
            }
            if ($("#email").val != null) {
                $("#email").val("${sessionScope.userInfo.email}");
            } else {
                $("#userName1").attr("placeholder", "在这里输入邮箱")
            }

            var usex = "${sessionScope.userInfo.sex}";
            if (usex == "女") {
                $("input[name=sex][value=女]").prop("checked", "${sessionScope.userInfo.sex}" == "女" ? true : false);
                form.render();
            }
            if ("${sessionScope.userInfo.sex}" != "女") {
                $("input[name=sex][value=男]").removeAttr("checked");
                $("input[name=sex][value=男]").prop("checked", "${sessionScope.userInfo.sex}" == "男" ? true : false);
                form.render();
            }
        })
        form.on('submit(demo1)', function (data) {
            $.ajax({
                type: 'PUT',
                url: '/userapi/user',
                data: data.field,
                dataType: 'json',
                success: function (data) {
                    alert(data.msg);
                    window.location.reload();
                }
            })

        });

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#birthday',
                type: "date",
                value: new Date(),
                max: 0
            });
        });
        form.verify({
            name: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });
    });


</script>
</body>
</html>
